<template>
  <div id="app">
    <!-- 通过父传子让一个组件的复用性最大化 -->
    <Header title="购物车" color="#c1c2c3" bgc="yellowgreen" />
    <!-- <Header title="购物车2" color="#f2f4f5" bg="red" /> -->
    <Good v-for="item in list" :key="item.id" :good="item" />
    <Footer :list="list" />
  </div>
</template>

<script>
import Header from "./views/header.vue";
import Good from "./views/good.vue";
import Footer from "./views/footer.vue";

/**
 * 工作中发Ajax请求获取数据的步骤：
 * 1.在methods中定义发送请求的方法
 * 2.在created(推荐)/mounted中发送请求
 */
import axios from "axios";

export default {
  components: {
    Header,
    Good,
    Footer,
  },
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const {
        data: { list, status },
      } = await axios({
        url: "/api/cart",
        method: "get",
      });
      if (status !== 200) return console.log("请求数据失败！");
      this.list = list;
    },
  },
};
</script>

<style>
#app {
  padding: 45px 0 49px 0;
}
</style>
